<template>
  <div class="DetailLandlord">
    <DetailSlot title="房东介绍">
      <template #default>

        <div class="topScroll">
          <img :src="landlordModule?.topScroll" alt="">
        </div>

        <div class="hotelTopInfo">

          <div class="left">
            <img :src="landlordModule?.hotelLogo" alt="">
            <div>
              <h3>{{ landlordModule?.hotelName }}</h3>
              <ul>
                <li v-for="(item, index) in landlordModule?.hotelTags" :key="index">{{ item.tagText?.text }}</li>
              </ul>
            </div>
          </div>

          <div class="right">联系房东</div>
        </div>

        <div class="hotelSummary">
          <ul>
            <li v-for="(item,index) in landlordModule?.hotelSummary" :key="index">
              <div class="top">{{ item.title }}</div>
              <div class="middle">{{ item.introduction }}</div>
              <div class="bottom">{{ item.tip }}</div>
            </li>
          </ul>
        </div>
      </template>
    </DetailSlot>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import DetailSlot from '../../../components/DetailSlot/DetailSlot.vue'


const props = defineProps({
  landlordModule: {
    type: Object,
    default: () => ({})
  }
})

</script>

<style scoped lang="less">
.topScroll {
  img {
    width: 100%;
  }
}

.hotelTopInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;

    img {
      width: 54px;
      height: 54px;
    }

    div {
      margin: auto 0;

      ul {
        display: flex;
        margin-left: -4px;
        color: #ccc;

        li {
          border-right: 2px solid #ccc;
          padding: 0 4px;
        }

        li:last-child {
          border-right: none;
        }
      }
    }
  }

  .right {
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff;
    background-color: var(--primary-color);
  }
}

.hotelSummary {
  margin: 10px auto;
  ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .top,.bottom{
      color: #999;
    }
    .middle{
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
